<template>
  <div class="list-container">
    <div class="top">
      <div class="item">
        <img :src="require('@/assets/img/given.png')" alt="" />
        <h3>已发放积分数</h3>
        <p>{{ isToFixed(info.give_total_point, 8) }}</p>
      </div>
      <div class="item">
        <img :src="require('@/assets/img/Integral-price.png')" alt="" />
        <h3>当前积分单价</h3>
        <p>{{ isToFixed(info.point_price, 2) }}</p>
      </div>
      <div class="item">
        <img :src="require('@/assets/img/aggregate.png')" alt="" />
        <h3>当前积分总价值</h3>
        <p>{{ isToFixed(info.all_point_cost, 8) }}</p>
      </div>
      <div class="item">
        <img :src="require('@/assets/img/record.png')" alt="" />
        <h3>全平台当前贡献值(已激活)</h3>
        <p>{{ isToFixed(info.all_activating_commission_able, 2) }}</p>
      </div>
      <div class="item">
        <img :src="require('@/assets/img/destroy.png')" alt="" />
        <h3>已销毁积分数</h3>
        <p>{{ isToFixed(info.all_handling_fee, 8) }}</p>
      </div>
    </div>
    <div class="table-box">
      <el-form ref="formRef" :model="pamars" inline>
        <el-form-item label="发放时间">
          <el-date-picker v-model="timer" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="datetimerange" @change="timerChange" range-separator="-"
            start-placeholder="开始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="getDataList()">查询</el-button>
          <el-button type="warning" @click="resetPamars()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" row-key="Id" border stripe style="width: 100%">
        <el-table-column type="index" align="center" width="80px" label="序号">
        </el-table-column>
        <el-table-column prop="real_name" align="center" label="用户姓名">
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号">
        </el-table-column>
        <el-table-column prop="give_point" align="center" label="发放积分">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.give_point, 8) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="current_commission_able" align="center" label="当日用户贡献值数">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.current_commission_able, 2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="current_total_commission_able" align="center" label="当日平台结算贡献值总额">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.current_total_commission_able, 2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="current_airdrop_total_point" align="center" label="当日权重空投额度">
          <template slot-scope="scoped">
            <div>
              {{ isToFixed(scoped.row.current_airdrop_total_point, 8) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" align="center" label="发放时间">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]"
        :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      info: {},
      timer: null,
      pamars: {
        page: 1,
        limit: 10,
        start_time: null,
        end_time: null
      },
      tableData: [],
      totalPage: 0
    }
  },
  created () {
    this.getInfo()
    this.getList()
  },
  methods: {
    getInfo () {
      seviceApi.getIntegralInfo().then(res => {
        if (res && res.data.code == 200) {
          this.info = res.data.data
        }
      })
    },
    getList () {
      seviceApi.getIntegralList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.tableData = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    timerChange (e) {
      if (e) {
        this.pamars.start_time = e[0]
        this.pamars.end_time = e[1]
      } else {
        this.pamars.start_time = null
        this.pamars.end_time = null
      }
    },
    resetPamars () {
      this.timer = null
      this.pamars.start_time = null
      this.pamars.end_time = null
      this.$refs.formRef.resetFields()
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.list-container {
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    font-size: 14px;
    margin-bottom: 30px;
  }

  .table-box {

    // width: 100%;
    // .el-table {
    //   width: 100%;
    // }
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-left: 130px;
    }
  }
}
</style>
